<template>
    <div style="width:100%;height:100%;">
        <div class="login-box animated bounceInDown">
            <div class="left">
                <el-carousel :interval="3000" :loop="true" arrow="always" height="500px">
                    <el-carousel-item v-for="(item,index) in [1,2,3]" :key="index">
                        <img :src="require('../../common/images/login-swiper'+(index+1)+'.jpg')"/>
                    </el-carousel-item>
                </el-carousel>
            </div>
            <div class="right">
                <div class="font30 bold">互赢电商 找回密码</div>
                <div class="font16 mt-20 color-info">一起出发 梦想同行</div>
                <div class="input mt-40">
                    <el-input v-model="obj.mobile" class="font16 pl-10 bold" prefix-icon="el-icon-mobile-phone"
                              size="large"
                              placeholder="请输入手机号"></el-input>
                </div>
                <div class="input mt-20">
                    <div class="flex-center flex-between">
                        <el-input v-model="obj.code" class="font16 pl-10 bold"
                                  prefix-icon="el-icon-alarm-clock" size="large" placeholder="请输入验证码"></el-input>
                        <el-button v-preventDbClick type="" @click="sendSms" size="mini">获取验证码</el-button>
                    </div>
                </div>
                <div class="input mt-20">
                    <el-input v-model="obj.password" type="password" class="font16 pl-10 bold"
                              prefix-icon="el-icon-lock"
                              size="large" placeholder="请输入新密码"></el-input>
                </div>
                <el-button v-preventDbClick class="width100 mt-50 font16 bold" type="primary" @click="forget()">确定
                </el-button>
            </div>
        </div>
        <div id="particles"></div>
    </div>
</template>

<script type="text/ecmascript-6">
import request from '../../common/js/request.js';
import {tool} from '../../common/js/tool.js';
import {particleParams} from '../../common/js/particle.js';

export default {
    data() {
        return {
            obj: {
                mobile: '',
                password: '',
                code: ''
            }
        };
    },

    computed: {},

    created() {
    },

    mounted() {
        particlesJS('particles', particleParams);
    },

    methods: {
        sendSms() {
            request({
                url: '/user/login/sendSms',
                data: {mobile: this.obj.mobile}
            }).then((res) => {
                tool.message(res.msg, 'success', null, 15000);
            });
        },
        forget() {
            request({
                url: '/user/login/forget',
                data: this.obj
            }).then((res) => {
                this.$confirm('密码修改成功，请重新登录！', '提示', {
                    confirmButtonText: '确定',
                    showCancelButton: false,
                    type: 'warning'
                }).then(() => {
                    this.$router.push({path: "/login"});
                });
            })
        }
    },

    components: {}
};
</script>

<style lang="less" rel="stylesheet/less" scoped>
.login-box {
    width: 900px;
    height: 500px;
    box-shadow: 0 0 30px white;
    border-radius: 6px;
    background: white;
    position: fixed;
    top: 50%;
    left: 50%;
    margin: -250px 0 0 -450px;
    z-index: 8;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    overflow: hidden;

    .left {
        width: 340px;

        img {
            width: 340px;
            height: 500px;
            border-radius: 6px 0 0 6px;
        }
    }

    .right {
        width: 0;
        flex: 1;
        padding: 0 50px;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .input {
            border-bottom: 1px solid #eee;
        }

        /deep/ .el-input__inner {
            border: none;
        }
    }

    .logo {
        width: 100px;
        height: 100px;
    }
}

#particles {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url("../../common/images/login-bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
}

</style>


